<template>
    <div>
        <div class="top">
            <div class = 'back' @click = '$router.go(-1)' v-if = '!$route.query.Cname'><span><i class='iconfont icon-youjiantou'></i></span></div>
            <div class="title">
                设置中心
            </div>
        </div>
        <div class="body">
            <ul>
                <li>
                    <div class="text">用户名</div>
                    <div class="content">{{username}}</div>
                </li>
                <li>
                    <div class="text">账号</div>
                    <div class="content">{{account}}</div>
                </li>
                <li>
                    <div class="text">密码</div>
                    <div class="content">{{pass}}</div>
                </li>
            </ul>
        </div>
        <div class="bottom" @click = 'exit'>
            退出登录
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            username : '',
            account : '',
            pass : '',
        }
    },
    methods:{
        exit(){
            localStorage.removeItem("_token_name");
            this.$router.go(-1);
        }
    },
    created(){
        this.username = localStorage.getItem('_token_name');
        this.pass = localStorage.getItem('_token_pass');
        this.account = localStorage.getItem('_token_account');
    }
}
</script>
<style lang="scss" scoped>
@import '../assets/font/font_icon/iconfont.css';
    .top{
        background: white;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        .back{
            position:absolute;
            top : 10px;
            left : 10px;
            width : 30px;
            height : 30px;
            background-color :  #f4f4f4;
            border-radius : 50%;
            text-align : center;
            line-height : 30px;
            transform : rotateY(180deg);
            span{
                display : block;
                i{
                    font-size : 23px;
                    color : #FF9900;
                }
            }
        }
        .title{
            text-align: center;
            font-size: 21px;
            height: 30px;
            line-height: 30px;
        }
    }
    .body{
        padding: 60px 0;
        ul{
            li{
                background: white;
                display: flex;
                margin: 6px 0;
                padding: 10px 20px;
                box-sizing: border-box;
                height: 60px;
                justify-content: space-between;
                align-items: center;
                .content{
                    width: 80px;
                    font-size: 16px;
                    color : grey;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
        }
    }
    .bottom{
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1000;
        background: white;
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color : orange;
    }
    
</style>